<template>
  <div>
    <van-field
        readonly
        clickable
        clearable
        v-model="nvalue"
        :label="label"
        :placeholder="handlePlaceholder()"
        v-bind="$attrs" v-on="$listeners"
        @click="showPicker = true;"
    />

    <!-- 选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          :title="title"
          show-toolbar
          :columns="options"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      >
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.dict_label }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      postData: { dict_type: null },
      nvalue: null,
      showPicker: false,
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: function () {
        return '请选择';
      }
    },
    label: {
      type: String,
      default: function () {
        return null;
      }
    },
    value: {
      type: String,
      default: function () {
        return null;
      }
    },
    dict_type: {
      type: String,
      default: function () {
        return null;
      }
    },
  },
  watch: {
    value: {
      async handler(newval, oldval) {
        this.nvalue = newval;
      },
      immediate: true
    }
  },
  mounted: function () {
    this.load();
  },
  methods: {
    load: function () {
      this.postData.dict_type = this.dict_type;
      elm.post('/system/login/io/SelectDictList', this.postData)
          .then((response) => {
            this.options = response;
          });
    },
    handlePlaceholder() {
      return "请选择"+ this.label;
    },
    onConfirm(value) {
      this.nvalue = value.dict_value;
      this.showPicker = false;
      this.$emit('change', this.nvalue);
    },
  }
}
</script>

<style scoped>
</style>